<template>
  <div>
    <el-input placeholder="请输入名称或编码" v-model="filterText" clearable prefix-icon="el-icon-search">
    </el-input>
    <el-tree v-loading="loading" ref="tree" style="padding-top: 10px" :data="viewModuleOptions.data"
             node-key="id" :highlight-current="true" :props="{ label: 'name' }" :filter-node-method="filterNode"
             @node-click="nodeClick">
      <span class="custom-tree-node" slot-scope="{ node, data }" @mouseover="mouseover(data)"
            @mouseleave="mouseout(data)">
        <el-tooltip class="item" effect="dark" :content="node.label" placement="top" :open-delay="500">
          <span class="node-label">{{ node.label }}</span>
        </el-tooltip>
        <div v-show="data.dropdownShow" @click.stop="() => { }"
             v-hasPermi="['sysDictType:add','sysDictType:update','sysDictType:delete']">
          <el-dropdown placement="right-start" trigger="click">
            <i class="el-icon-s-operation"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-circle-plus"
                                @click.native="initDialog({ref:addUpdateDialogRef})"
                                v-hasPermi="['sysDictType:add']">新增字典</el-dropdown-item>
              <el-dropdown-item icon="el-icon-edit-outline"
                                @click.native="initDialog({ref:addUpdateDialogRef,row:data})"
                                v-hasPermi="['sysDictType:update']">修改字典</el-dropdown-item>
              <el-dropdown-item icon="el-icon-delete-solid"
                                @click.native="handleDelete(data)"
                                v-hasPermi="['sysDictType:delete']">删除字典</el-dropdown-item>
              <el-dropdown-item
                  @click.native="renew(data)"
                  v-hasPermi="['sysDictData:renew']">更新缓存</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </span>
    </el-tree>
    <!-- 添加、修改 -->
    <add-update :ref="addUpdateDialogRef"
                :getDataList="getDataList"
                :dictType="dict.type" />
  </div>
</template>

<script>
import viewModule1 from '@/mixins/vxe-grid.js'; // 公共js
import addUpdate from './AddUpdate.vue'

export default {
  name: 'TreeSide',
  mixins: [viewModule1],
  dicts: ['enable_status'],
  components: {
    addUpdate
  },
  data() {
    return {
      addUpdateDialogRef: 'addUpdateDialogRef',
      viewModuleOptions: {
        activatedIsNeed: false,
        dataUrl: '/sysDictType/list',
        removeUrl: '/sysDictType',
      },
      filterText: '',
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getDataList().then(res => {
      if (this.viewModuleOptions.data) {
        let first = this.viewModuleOptions.data[0]
        this.$refs.tree.setCurrentKey(first.id)
        this.nodeClick(first)
      }
    })
  },
  methods: {
    mouseover(data) { // 鼠标移入
      this.$set(data, 'dropdownShow', true)
    },
    mouseout(data) { // 鼠标移除
      this.$set(data, 'dropdownShow', false)
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1 || data.type.indexOf(value) !== -1
    },
    nodeClick(data) {
      this.$emit('sysDictFun', data.type)
    },
    renew(data) {
      this.$emit('renewFun', data.type)
    }
  }
}
</script>
